
// alert panel template
$igv-webapp-panel-width: 300px;
$igv-webapp-panel-height: 200px;
$igv-webapp-panel-drag-container-height: 32px;

.card {
  position: absolute;
  top: -1000px;
  left: -1000px;

  z-index: 1024;

  width: $igv-webapp-panel-width;
  height: $igv-webapp-panel-height;

  border-color: $spacewalk_aluminum;
  background-color: $spacewalk_snow;

  user-select: none;

  .card-body {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    padding: unset;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    .igv-webapp-panel-drag-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;

      width: 100%;
      height: $igv-webapp-panel-drag-container-height;

      background-color: $spacewalk_silver;

      border-top-left-radius: inherit;
      border-top-right-radius: inherit;

      i {
        cursor: grab;
        color: $spacewalk_steel;
        display: block;
      }

      i:first-child {
        cursor: unset;
        color: transparent;
        background-color: transparent;
      }

      i:last-child {
        cursor: pointer;
        margin-right: 8px;
      }
    }

  }

}

